<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>New Order</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#shippingCheckbox").on('click',function () {
                var addressTale = $('#addressTable');
                if(this.checked){
                    console.log('ook');
                    $("#addressTable").append("<tr> <th colspan=2>Shipping Address</th> </tr>" +
                        "<tr> <td>First name:</td> <td><input type='text' name='order.shipToFirstName' th:value='${session.account.firstName}'/></td> </tr>" +
                        "<tr> <td>Last name:</td> <td><input type='text' name='order.shipToLastName' th:value='${session.account.lastName}'/></td> </tr>" +
                        "<tr> <td>Address 1:</td> <td><input type='text' size='40' name='order.shipAddress1' th:value='${session.account.address1}'/></td> </tr>" +
                        "<tr> <td>Address 2:</td> <td><input type='text' size='40' name='order.shipAddress2' th:value='${session.account.address2}'/></td> </tr>" +
                        "<tr> <td>City:</td> <td><input type='text' name='order.shipCity' th:value='${session.account.city}'/></td> </tr> " +
                        "<tr> <td>State:</td> <td><input type='text' size='4' name='order.shipState' th:value='${session.account.state}'/></td> </tr> " +
                        "<tr> <td>Zip:</td> <td><input type='text' size='10' name='order.shipZip' th:value='${session.account.zip}'/></td> </tr> " +
                        "<tr> <td>Country:</td> <td><input type='text' size='15' name='order.shipCountry' th:value='${session.account.country}'/></td> </tr>");
                }else{
                    $("#addressTable").empty();
                }
            });
        });
    </script>
</head>
<body>
    <div th:replace="common/Top"></div>

    <div id="Content">
        <div id="BackLink">
            <a href="browse?action=viewMain">Return to Main Menu</a>
        </div>

        <div id="Catalog">
            <form action="/order/generateOrder" method="post" id="addressForm">
                <table  style="width: 520px;margin-left: 267px">
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>

                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select name="order.cardType">
                                <option selected="selected" value="Visa">Visa</option>
                                <option value="MasterCard">MasterCard</option>
                                <option value="American Express">American Express</option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td>Card Number:</td>
                        <td>
                            <input name="order.creditCard" type="text">
                        </td>
                    </tr>

                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input name="order.expiryDate" type="text"></td>
                    </tr>

                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td>
                            <input name="order.billToFirstName" th:value="${session.account.firstName}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td>
                            <input name="order.billToLastName" th:value="${session.account.lastName}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td>
                            <input name="order.billAddress1" th:value="${session.account.address1}" type="text" size="40">
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input name="order.billAddress2" th:value="${session.account.address2}" type="text" size="40"></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input name="order.billCity" th:value="${session.account.city}" type="text"></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input name="order.billState" th:value="${session.account.state}" type="text" size="4"></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input name="order.billZip" th:value="${session.account.zip}" type="text" size="10"></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input name="order.billCountry" th:value="${session.account.country}" type="text" size="15"></td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <input id="shippingCheckbox" name="shippingAddressRequired" value="true" type="checkbox" >Ship to different address...
                        </td>
                    </tr>
                </table>

                <table style="width: 520px;margin-left: 267px" id="addressTable">

                </table>
                <input name="newOrder" value="Continue" type="submit">
            </form>
        </div>
    </div>

    <div th:replace="common/Bottom"></div>
</body>
</html>